<template>
  <page>
    <el-row>
      <el-col v-for="item in monthData" :key="item" :lg="12" :sm="24" :xs="24" :md="24">
        <calendar-card title="实际产量展示" type="month" :year="item.year" @month="monthChange" :data="item.list" />
      </el-col>
    </el-row>
  </page>
</template>

<script>
import calendarCard from '../components/calendarCard.vue';
import { getMonth } from '@/api/home';
import { mapGetters } from 'vuex';
export default {
  components: {
    calendarCard,
  },
  computed: {
    ...mapGetters(['projectId']),
  },
  data() {
    return {
      monthData: [],
    };
  },
  created() {
    this.getSummaryData();
  },
  methods: {
    getCalendarData(data = []) {
      const list = [];
      data.forEach(item => {
        const year = item.year;
        const rate = item.rate;
        const finishNum = item.finishNum;
        const template = { year, list: [] };
        const detail = item.detail || [];
        detail.forEach((item, index) => {
          template.list.push({
            text: `${item.name}`,
            type: 'month',
            count: item.val,
          });
          // 汇总和图表
          if (index === detail.length - 1) {
            template.list.push(
              ...[
                { type: 'summary', count: finishNum },
                { type: 'chart', count: rate },
              ]
            );
          }
        });
        list.push(template);
      });
      return list;
    },
    getSummaryData() {
      getMonth({ projectId: this.projectId }).then(res => {
        const { data } = res || {};
        this.monthData = this.getCalendarData(data);
      });
    },
    monthChange(val) {
      const { year, month } = val;
      this.$router.replace({ path: `/progress/day?year=${year}&month=${month.toString().padStart(2, '0')}` });
    },
  },
};
</script>

<style lang="scss" scoped></style>
